<template>
    <view class="page" :style="{minHeight:height+'px'}">
        <view class="top"></view>
        <view class="content">
            <view class="box">
                <view class="title">
                    <image :src="customerImage"></image>
                    <view class="size">{{customer.name}}</view>
                </view>
                <view class="size">终端编码：{{ customer.code }}</view>
                <view class="size">拜访主题：{{ remark }}</view>
                <view class="size">拜访日期：{{ busDate }}</view>
                <view class="flex .j-content-between">
                  <view class="flex">
                    <uni-icons type="location-filled" size="15" color="rgb(93, 113, 213)"></uni-icons>
                  <view>{{ address }}</view>
                  </view>
                  <uni-icons type="paperplane-filled" size="15" color="rgb(93, 113, 213)"></uni-icons>
                </view>
                <button class="button" v-if="customer.visited !== 1" @tap="jump(`../../pageDelivery/signIn/index?remark=1`)">签到</button>
                <button class="button bgc"  v-else>已签到</button>
            </view>
            <view class="box" style="margin-top: 10rpx">
              <!-- <view class="flex" @click="sale()">
                    <view class="red">*</view>
                    <view class="lits">在售品项</view>
                  </view>
                  <view class="flex" @click="record(`/pageShopping/home/index?type=3&&news=1&photo=1`)" >
                    <view class="red">*</view>
                    <view class="lits">客户库存</view>
                  </view>
                  <view class="flex" @click="photo()">
                    <view class="red">*</view>
                    <view class="lits">陈列拍照</view>
                  </view>
                  <view class="flex"  @click="record('/pageShopping/home/index?type=1&&order=1&photo=1')">
                    <view class="lits">订单</view>
                  </view>
                  <view class="flex" @click="agreements()">
                    <view class="lits">协议</view>
              </view> -->
                <view class="flex" @click="trigger(item)" v-for="(item,i) in menu" :key="i">
                  <view class="flex a-item j-content-between" v-if="item.visible" style="width:100%">
                    <view class="flex a-item">
                      <view class="red" v-show="item.require">*</view>
                      <view class="lits">
                      <view v-if="item.name==='onSale'">在售品项</view>
                      <view v-else-if="item.name==='customerStock'">客户库存</view>
                      <view v-else-if="item.name==='photo'">陈列拍照</view>
                      <view v-else-if="item.name==='orderd'">订单</view>
                      <view v-else-if="item.name==='contract'">协议</view>
                      </view>
                    </view>
                    <view v-show="check[item.name]" class="completed">
                      已完成
                    </view>
                  </view>
                </view>
            </view>
        </view>
        <view class="bottom">
            <button v-if="customer.visited === 1" @tap="signOut" class="bgc">签退</button>
            <button v-else  class="bgc bgc1">已签退</button>
        </view>
    </view>
</template>
<script>
import {curDate, getScreen} from "../../service/auth";
import {getLastVisitRecord, signOutByCustomerIds,menu,check,photoGroup} from "../../service/api/delivery";
export default {
    name:'index',
    data() {
        return {
            height:0,
            busDate:'',
            remark:'',
            date:curDate(),
            customerId:0,
            customer:{},
            customerImage:'http://121.41.75.32:8002/file/static/6f627c7ced39fb3f28440147bd0008f8.jpeg',
            latitude:'',
            longitude: '',
            address: '',
            menu:[],
            check:{},
            newphoto:''
        }
    },
    onLoad(option) {
    this.customerId = option.customerId
    
    this.menus()
    
    const app = getApp()
    this.customer = app.globalData.customer
    console.log(this.customer,'客户',option);
    try{
      this.customerImage = JSON.parse(this.customer.imageUrl)[0].path
    }catch (e) {
    }
  },
  onShow(){
    this.checks()
    this.onGet()
  },
    created() {
    const {height} = getScreen()
    this.height = height
    const that=this
    uni.getLocation({
    type: 'wgs84',
        isHighAccuracy:true,
    success: function (res) {
      wx.request({
            url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=QQXBZ-BUKYS-YEMOS-6DLDL-WMCTO-5ZFNX`,
            success(val) {
              that.address=val.data.result.address
              console.log(val.data.result.address,'地址',val);
            }
          })
    }
  });
    },
    methods:{
      menus(){
        menu().then(res=>{
          this.menu=res.data
        })
      },
      checks(){
        const data ={
        customerId:this.customerId
      }
        check(data).then(res=>{
          this.check=res.data
        })
      },
      trigger(item){
        if (this.customer.visited !== 1)return uni.showToast({title:'只有签到状态下才可进入',icon:"none"})
        const app = getApp()
      app.globalData.selectedPosition = this.customer
        if (item.name==="onSale") {
      uni.navigateTo({url:`../visitor/sales/index?customerId=${this.customer.id}`})
        }
        if (item.name==="customerStock") {
          uni.navigateTo({url:`/pageShopping/home/index?&type=3&&news=1&photo=1`})
        }
        if (item.name==="photo") {
              uni.navigateTo({url:`../visitor/photograph/index?customerId=${this.customer.id}`})
            }
      
        if (item.name==="orderd") {
      uni.navigateTo({url:`/pageShopping/home/index?type=1&&order=1&photo=1`})
        }
        if (item.name==="contract") {
      uni.navigateTo({url:`/pageShopping/home/index?type=5&customerId=${this.customer.id}&photo=1`})
        }
      },
        jump(url){
      uni.navigateTo({url:url})
    },
    signOut(){
    const _this = this
        uni.getLocation({
            type: 'wgs84',
            isHighAccuracy:true,
            geocode:true,
            altitude: true,
            success: function (res) {
                const data ={
                    signOutLocation:`${res.longitude},${res.latitude}`,
                    customerId:_this.customerId
                }
                signOutByCustomerIds(data).then(res=>{
                    if (res.status === 200){
                        const index = getCurrentPages().findIndex(item=>item.route.includes('pages/mine/visitor/index'))
                        uni.navigateBack({
                            delta:getCurrentPages().length - index -1
                        })
                        uni.showToast({title:'签退成功',icon:'none'})
                    }else {
                        uni.showToast({title:res.msg,icon:'none'})
                    }
                }).catch(err=>{
                    uni.showToast({title:err.msg,icon:'none'})
                })
            },
            fail: function () {
                uni.showToast({
                    title: '获取地址失败，无法签退请联系管理员',
                    icon:'none'
                });
            }})
    },
    // record(url){
    //   const app = getApp()
    //   app.globalData.selectedPosition = this.customer
    //   if (this.customer.visited !== 1)return uni.showToast({title:'只有签到状态下才可进入',icon:"none"})
    //   uni.navigateTo({url:url})
    // },
    // photo(){
    //   if (this.customer.visited !== 1)return uni.showToast({title:'只有签到状态下才可拍照',icon:"none"})
    //   uni.navigateTo({url:`../visitor/photograph/index?customerId=${this.customer.id}`})
    // },
    // sale(){
    //   if (this.customer.visited !== 1)return uni.showToast({title:'只有签到状态下才可进入',icon:"none"})
    //   uni.navigateTo({url:`../visitor/sales/index?customerId=${this.customer.id}`})
    // },
    // agreements(){
    //   if(this.customer.visited !== 1)return uni.showToast({title:'非签到状态',icon:"none"})
    //   const app = getApp()
    //   app.globalData.selectedPosition = this.customer
    //   uni.navigateTo({url:`/pageShopping/home/index?type=5&customerId=${this.customer.id}&photo=1`})
    // },
    onGet(){
      getLastVisitRecord(this.customerId).then(res=>{
        console.log(res,'拜访');
        if (res.data.customerVisitRecord){
        this.busDate=res.data.customerVisitRecord.busDate
        this.remark=res.data.customerVisitRecord.remark}
        const app = getApp()
        this.$set(app.globalData,'customerVisitRecord',res.data.customerVisitRecord)
      })
    },
}
}
</script>
<style scoped lang="scss">
.page{
    position: relative;
  font-family: PingFangSC;
  background: #F5F5F5;
  .top{
    position: absolute;
    background: rgb(87, 87, 197);
    width: 100%;
    height: 429rpx;
    z-index: 0;
  }
  .content{
    padding: 50rpx 20rpx 100rpx 30rpx;
    .box{
      margin-top: 50rpx;
      position: relative;
      z-index: 1;
      .flex{
        display: flex;
        align-items: center;
        .red{
            color: red;
            margin-right: 10rpx;
            }
      }
      .completed{
            color: blue;
            border: 1rpx solid blue;
            padding: 8rpx;
            font-size: 25rpx;
            transform: rotate(-15deg);
      }
      .title{
        display: flex;
        align-items: center;
        image{
            width: 60rpx;
            height: 60rpx;
            flex-shrink: 0;
            border-radius: 50%;
        }
        .size{
            margin-left: 20rpx;
            font-size: 35rpx;
        }
      }
      .size{
            margin: 10rpx 0;
            font-size: 28rpx;
        }
      .button{
        width: 90%;
        background: rgb(93, 113, 213);
        border-radius: 90rpx;
        margin: 10rpx 5%;
        color: #FDFEFF;

    }
    .bgc{
            background: rgb(183,183,183);
        }
        .lits{
          display: flex;
          align-items: center;
          min-height: 88rpx;
          padding-right: 70rpx;
          font-size: 30rpx;
        }
    }
  }
  .bottom{
    display: flex;
    width: 100%;
    position: fixed;
    z-index: 99;
    justify-content: space-between;
      .bgc{
          background-color: rgb(93, 113, 213);
          border-radius: 90rpx;
          color: white;
          width: 100%;
        }
        .bgc1{
          background: rgb(183,183,183);
        }

  }
}
</style>
